前言
今天要來介紹前後端工程師的共同朋友-Network啦!(為什麼聽起來這麼像在相親)當我們打開開發者工具再按Network時可以看到下面的畫面。
主要功用
💡 分析當前頁面對伺服器請求的資訊，包含API名稱、狀態、種類、時間、流量變化…各種資訊今天會介紹紅框圈起來的幾個小東西~
第一個是Filter系列，也就是上面圖片最上面的紅框。可以針對請求的種類不同去進行篩選和歸類，如果是用上面filter框框的話，則是會套用紅框已選的種類再去針對filter框框內容去做篩選。下面就來簡單介紹紅框的圈起來的各種功能吧
- All : 不會對請求去做任何篩選，會直接把所有請求列出來
- Fetch/XHR :Fetch API 以及 XMLHttpRequest 的請求，出現於使用 Ajax 的網頁
- JS: 會撈出這個頁面使用到的JavaScript資源
- CSS: 會撈出這個頁面使用到的CSS資源
- Img:圖片資源
- Font:文字資源
- Doc:HTML內容
至於WS、Wasm、Manifest我自己沒有使用過，上網找也沒找出什麼資訊就暫時先不介紹了。我自己最常用的其實是Fetch/XHR~因為我會需要看API的狀態或是回傳內容。
再來看到Status和Type，這兩個分別代表請求的狀態和種類
- Status : 可以去確認請求是否有成功，最常見的status為 2xx、4xx、5xx，每個Status代表的意義也都不一樣。
- 200 ⇒ 請求成功
- 400 ⇒ Bad request
- 401 ⇒ unauthorized，連使用者是誰都不知道，通常就是未登入狀態
- 403 ⇒ forbidden，已知使用者是誰但該使用者沒有權限取得資料
- 404 ⇒ not found，找不到資源，這應該超級常見xD
- 500 ⇒ 伺服器端有問題
- Type: 請求種類，通常為fetch或XHR
來看到上面圖片左下角有個 2/33 Requests， 2代表符合在這個篩選條件下出來的結果，33則是這個頁面載入所發出的所有請求數量
點進每個請求會發生什麼事情呢?
答案是…….你會看到這個請求的各種資訊xD
Headers :可以看到這個請求是用什麼方法(request method)、請求狀態(status code)、response header、request headers
Payload: 當發出請求的時候，會夾帶那些參數去撈取請求的資料
Preview & Response : 這兩個基本上會記錄回傳的內容，只是Preview的閱讀性比較高
結論
如果以後哪個網站掛掉，可以試著打開開發者工具的Network來確認一下是哪個請求造成頁面壞掉，再來進一步去追程式碼去看是哪個橋段Q掉了~如果你不是工程師也是可以打開來看一下密密麻麻的請求們xD(我就問誰會沒事打開開發者工具???大概只有像我這種有職業病的人才會沒事打開來看xD
